<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	.page{
		margin:2em;
	}
	.page a{
		text-decoration:none;
		display:inline-block;
		line-height:14px;
		padding:2px 5px;
		color:#333;
		border:1px solid #ccc;
		margin:0 2px
	}
	.page a:hover,.page a.on{
		background:#999;
		color:#fff;
		border:1px solid #333;
	}
	.page a.unclick,.page a.unclick:hover{
		background:none;
		border:1px solid #eee;
		color:#999;
		cursor:default;
	}
</style>
</head>
<body>
	<div class="page">
		
	</div>
	<div class="page">
		
	</div>
</body>
<script type="text/javascript">
	//container 容器，count 总页数 pageindex 当前页数
	function setPage(container,count,pageindex){  
		var container=container;
		var count=count;
		var pageindex=pageindex;
		var a=[];
		//总页数少于10 全部显示,大于10 显示前3 后3 中间3 其余....
		
		if(pageindex==1){
			a[a.length]="<a href=\"#\" class=\"prev unclick\">prev</a>";
		}
		else{
			a[a.length]="<a href=\"#\" class=\"prev\">prev</a>";
		}
		
		function setPageList(){
			if(pageindex==i){
				a[a.length]="<a href=\"#\" class=\"on\">"+i+"</a>";
			}
			else{
				a[a.length]="<a href=\"#\">"+i+"</a>";
			}
		}
		//总页数小于10
		if(count<=10){
			for(var i=1;i<=count;i++){
				setPageList();
			}
		}
		//总页数大于10页
		else{
			if(pageindex<=4){
				for(var i=1;i<=5;i++){
					setPageList();
				}
				a[a.length]="...<a href=\"#\">"+count+"</a>";
			}
			else if(pageindex>=count-3){
				a[a.length]="<a href=\"#\">1</a>...";
				for(var i=count-4;i<=count;i++){
					setPageList();
				}
			}
			
			else{ //当前页在中间部分
				a[a.length]="<a href=\"#\">1</a>...";
				for(var i=pageindex-2;i<=pageindex+2;i++){
					setPageList();
				}
				a[a.length]="...<a href=\"#\">"+count+"</a>";
			}
		}
		
		if(pageindex==count){
			a[a.length]="<a href=\"#\" class=\"next unclick\">next</a>";
		}
		else{
			a[a.length]="<a href=\"#\" class=\"next\">next</a>";
		}
		
		container.innerHTML=a.join("");
		
		
		//事件点击
		var pageClick=function(){
			var oAlink=container.getElementsByTagName("a");
			var inx=pageindex; //初始的页码
			oAlink[0].onclick=function(){ //点击上一页
				if(inx==1){
					return false;
				}
				inx--;
				setPage(container,count,inx);
				return false;
			}
			for(var i=1;i<oAlink.length-1;i++){ //点击页码
				oAlink[i].onclick=function(){
					inx=parseInt(this.innerHTML);
					setPage(container,count,inx);
					return false;
				}
			}
			
			oAlink[oAlink.length-1].onclick=function(){ //点击下一页
				if(inx==count){
					return false;
				}
				inx++;
				setPage(container,count,inx);
				return false;
			}
		}()
		
	}
	
	setPage(document.getElementsByTagName("div")[0],10,1);
	setPage(document.getElementsByTagName("div")[1],13,5);
</script>
</html>
